<template>
    <div>
        <el-dialog v-model="dialogFormVisible" title="添加科目" :close-on-click-modal="false" :show-close="false">
            <el-form>
                <el-form-item label="名称" style="width:200px">
                    <el-input v-model="inputData.industryName" autocomplete="off" maxlength="200" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="inputData.operationRecordRemarks" :autosize="{ minRows: 4, maxRows: 6 }"
                        type="textarea" maxlength="400" :show-word-limit="true" placeholder="备注一下呗!" />
                </el-form-item>
                <el-form-item label="日期" style="width:200px">
                    <el-input v-model="nowData" autocomplete="off" maxlength="200" :readonly="true" />
                </el-form-item>

                <el-form-item label="请打开选择科目类型？">
                    <el-switch v-model="switchValue" inline-prompt active-text="是" inactive-text="否" size="large"
                        width="100" @change="switchChange" :disabled="switchValue" />
                </el-form-item>

                <el-breadcrumb :separator-icon="ArrowRight" v-show="switchValueShow" v-if="userXuanZType.length > 0">
                    <el-breadcrumb-item style="color:#40ffb1;font-weight:bold">类型</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="vals in userXuanZType" :key="vals.industryId">{{vals.industryName}}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <el-button type="success" link @click="clickSuccessUpdate()">点击修改</el-button>
                    </el-breadcrumb-item>
                </el-breadcrumb>

            </el-form>

            <!-- 嵌套弹出层 -->
            <template>
                <el-dialog v-model="switchValueQIanTao" width="30%" title="选择类型" append-to-body :show-close="false"
                    :close-on-click-modal="false">
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item style="color:#40ffb1;font-weight:bold">选择</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="vals in userXuanZType" :key="vals.industryId">{{vals.industryName}}
                        </el-breadcrumb-item>
                    </el-breadcrumb>

                    <div style="height:20px"></div>
                    <div>
                        <tree-commponent :treeData="new useStore().state.subjectData" @treeComponent="treeComponent"
                            :showCheckBox="false">
                        </tree-commponent>
                    </div>

                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="switchValueCancel()">取消</el-button>
                            <el-tooltip class="box-item" effect="light" content="请选择三级类型" placement="bottom"
                                :disabled="userXuanZType.length == 3">
                                <span>
                                    <el-button type="primary" @click="AreYouSure()" :disabled="userXuanZType.length!=3">
                                        确定</el-button>
                                </span>
                            </el-tooltip>
                        </span>
                    </template>
                </el-dialog>
            </template>


            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisibleCancel()">取消</el-button>
                    <el-tooltip class="box-item" effect="light" :content="text" placement="bottom"
                        :disabled="elTooltipShow">
                        <span>
                            <el-button type="primary" @click="dialogFormVisiblePreservation()" :disabled="elTooltipShowComputed">保存</el-button>
                        </span>
                    </el-tooltip>
                    
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox ,ElNotification} from 'element-plus'
import { useStore } from 'vuex'
import {ArrowRight} from '@element-plus/icons-vue'
import { reactive, ref } from '@vue/reactivity'
import { watch,computed } from '@vue/runtime-core'
import axios from 'axios';
export default {
    props: ['modelValue'],
    emits: ['backData','isUpdateTableData'],
    setup(props,{emit}){
        const store = new useStore()
        //时间
        let nowData = new Date().toLocaleString()
        //父组件的值
        let dialogFormVisible = ref(false)
        dialogFormVisible.value = props.modelValue
        watch(()=>props.modelValue,(newVal)=>{
            dialogFormVisible.value = newVal
        })
        watch(dialogFormVisible,(newVal,oldVal)=>{
            emit('backData',newVal)
        })
        //************************************************************ */
        //用户输入的数据
        const inputData = reactive({
            industryName:'',
            operationRecordRemarks:''
        })
        //弹出层取消操作
        function dialogFormVisibleCancel(){
            ElMessage({
               type: 'info',
               message: '已取消操作',
           })
           inputData.industryName = ''
           inputData.operationRecordRemarks = ''
           userXuanZType.value = []
           dialogFormVisible.value = false
           switchValue.value = false
        }
        //弹出层保存操作
        function dialogFormVisiblePreservation() {
            ElMessageBox.confirm(
                '确认是否保存?',
                '请确认',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {//确认回调函数
                    axios.post("/api/accountType/insertAccountType",{
                        typeId:userXuanZType.value[userXuanZType.value.length-1].industryId,
                        name:inputData.industryName,
                        operationRecordRemarks:inputData.operationRecordRemarks,
                        time:nowData
                    }).then((response)=>{
                        if(response.status == 200){
                            if(response.data.code == 200){
                                store.commit('insertData',response.data.data)
                                emit('isUpdateTableData',true)
                                ElNotification({
                                    title: '操作成功',
                                    message: '成功保存',
                                    type: 'success',
                                })
                                inputData.industryName = ''
                                inputData.operationRecordRemarks = ''
                                userXuanZType.value = []
                                switchValue.value = false
                                dialogFormVisible.value = false
                            }else{
                                ElNotification({
                                    title: '操作失败',
                                    message: '添加失败',
                                    type: 'error',
                                })
                            }
                        } else {
                            ElNotification({
                                title: '操作异常',
                                message: '异常操作',
                                type: 'warring',
                            })
                        }
                    })
                    
                }).catch(() => {//取消回调函数
                    
                })

        }
        //保存按钮tooltip
        let text = ref('')
        let elTooltipShow = ref(false)
        const elTooltipShowComputed = computed(()=>{
            if(inputData.industryName === ''){
                text.value = '请输入名称'
                elTooltipShow.value = false
                return true
            }else if(userXuanZType.value.length != 3){
                text.value = '不是三级类型'
                elTooltipShow.value = false
                return true
            }
            elTooltipShow.value = true
            return false
        })
        //*********************************************************** */
        //开关组件
        let switchValue = ref(false)
        function switchChange(a){
            if(a){
                switchValueQIanTao.value = true
                
            }
        }
        //******A*************************************************** */
        //嵌套弹出层
        let switchValueQIanTao = ref(false)
        //嵌套层取消操作
        function switchValueCancel(){
            switchValue.value = false
            switchValueQIanTao.value = false
            userXuanZType.value = []
            switchValueShow.value = false
        }
        //嵌套层确认操作
        function AreYouSure(){
            switchValueQIanTao.value = false
            switchValue.value = true
            switchValueShow.value = true
        }
        //类型展示
        let switchValueShow = ref(false)
        //点击修改类型
        function clickSuccessUpdate(){
            switchValueQIanTao.value = true
        }
        //************************************************************** */
        //数据存储
        let userXuanZType = ref([])
        //用户选择的类型
        let b = null
        function treeComponent(a){
            if(b != null && b.industryId == a.industryParentId){
                userXuanZType.value.push(a)
            }else if(a.level == 1){
                userXuanZType.value.splice(0,userXuanZType.value.length,a)
            }else{
                store.state.subjectData.forEach((val,index)=>{
                    if(val.industryId == a.industryParentId){
                        userXuanZType.value.splice(0,userXuanZType.value.length,val,a)
                        return;
                    }
                    val.industryAccountType.forEach((vals)=>{
                        if(vals.industryId == a.industryParentId && vals.industryParentId == val.industryId){
                            userXuanZType.value.splice(0,userXuanZType.value.length,val,vals,a)
                            return;
                        }
                    })

                })
               
            }
            b = a
        }
        return {
            dialogFormVisible,
            nowData,
            userXuanZType,
            switchValueQIanTao,
            inputData,
            switchValue,
            switchValueShow,
            text,
            elTooltipShowComputed,
            elTooltipShow,
            switchValueCancel,
            AreYouSure,
            dialogFormVisibleCancel,
            dialogFormVisiblePreservation,
            switchChange,
            useStore,
            treeComponent,
            clickSuccessUpdate,
            ArrowRight,

        }
    }
}
</script>

<style>

</style>